<template>
  <div class="home">
    <!-- 模板中: {{ $store.state.count }} -->
    <!-- {{ $store.state.count }} -->
    <button @click="addCount(5)">addCount</button>
    <h1>store_count: {{ count }}</h1>
    <button @click="subCount(5)">subCount</button>
    <button @click="setAsyncCount(666)">resetCount</button>
    <h1>filterList: {{ filterList }}</h1>

  </div>
</template>

<script>
// @ is an alias to /src
import store from '@/store'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'HomeView',
  components: {

  },
  data () {
    return {
      cur_count: 0
    }
  },
  created () {
    // JS模块中 store.state.xxx
    console.log('store.state.count: ', store.state.count)
  },
  methods: {
    ...mapMutations(['addCount', 'subCount']),
    ...mapActions(['setAsyncCount'])
    // addCount (n) {
    //   this.$store.commit('addCount', n)
    // },
    // subCount (n) {
    //   this.$store.commit('subCount', n)
    // },
    // resetCount (n) {
    //   this.$store.dispatch('setAsyncCount', n)
    // }

  },
  computed: {
    // mapState是辅助函数，帮助我们把 store中的数据 自动 映射到 组件的计算属性中
    ...mapState(['count']),
    ...mapGetters(['filterList'])

  }
}
</script>
